<template>
  <div class="cleaning_1">
    <div>
      <div style="position: absolute; top: 14px; left: 5px; color: #fff">
        <van-icon name="arrow-left" color="#ffffff" size="24" @click="back"></van-icon>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          font-weight: 700;
          color: #fff;
          height: 75px;
          letter-spacing: 5px;
        "
      >
        统计数据
      </div>
    </div>
    <van-tabs
      class="van_tab"
      lineColor="#ffffff"
      :scrollable="false"
      :list="tabList"
      @click="tabChange"
      title-active-color="#ffffff"
      title-inactive-color="#ffffff"
      background="none"
    >
      <van-tab :title="item.name" v-for="item in tabList" :key="item.name"></van-tab>
    </van-tabs>
    <div class="list_outside">
      <div class="list">
        <div class="list_head">
          <div style="width: 80%; display: flex; align-items: center">
            <van-icon name="calendar-o" color="#A6A6A6" size="20"></van-icon>
            <span style="margin: 5px">
              {{ timeValue[0] ? timeValue[0] + " 至 " + timeValue[1] : "请选择" }}
            </span>
          </div>
          <div>
            <van-icon @click="timeShow = true" name="calendar" color="#A6A6A6" size="28"></van-icon>
          </div>
        </div>
        <div class="list_team" v-if="LYdata.length">
          <div
            class="list_item"
            style="background-color: #e6f1ff"
            v-for="item in LYdata"
            :key="item.id"
            @click="showPerson(item)"
          >
            <div class="XX">
              <div style="font-size: 18px; color: black; font-weight: 600; margin-right: 20px">
                {{ item.name }}
              </div>
              <div>登记订单数：{{ item.totalQuantity }}</div>
            </div>
            <van-image
              class="img"
              width="105px"
              height="95px"
              :src="item.image"
              mode="widthFix"
            ></van-image>
          </div>
        </div>
      </div>
    </div>
    <van-popup round v-model:show="show" position="bottom" :style="{ height: '55%' }">
      <div style="font-size: 16px; padding: 5px 15px">
        <div v-for="item in detailList" :key="item.id" class="person_list">
          <van-cell title="参加人员姓名" :label="item.employeeName"></van-cell>
        </div>
      </div>
    </van-popup>
    <van-calendar
      closeOnClickOverlay
      v-model="timeShow"
      type="range"
      @confirm="confirm"
      @close="timeShow = false"
      color="#00BAAD"
      :min-date="minDate"
      :max-date="maxDate"
      :allow-same-day="true"
      :max-range="180"
    ></van-calendar>
  </div>
</template>

<script>
import moment from "moment"
import { queryConvalesceActivityCount } from "@/api/realAssets/icsharedstation/LYDJ/index.js"

export default {
  data () {
    return {
      title: "疗休养统计数据",
      show: false,
      detailList: [],
      LYdata: [],
      timeValue: [], // 时间
      timeShow: false, // 时间组件弹出关闭
      frontTime: "", // 开始日期
      backTime: "", // 结束日期
      minDate: new Date(moment().year(), 0, 1), // 最小日期
      maxDate: new Date(moment().year(), 11, 31), // 最大日期
      tabList: [
        {
          name: "7日内",
          day: "7"
        },
        {
          name: "30日内",
          day: "30"
        },
        {
          name: "自定义",
          day: ""
        }
      ] // 选项卡
    }
  },
  methods: {
    tabChange (item) {
      if (this.tabList[item].day.length) {
        this.frontTime = moment().subtract(this.tabList[item].day, "days").format("YYYY-MM-DD")
        this.backTime = moment().format("YYYY-MM-DD")
        this.timeValue = [this.frontTime, this.backTime]
        this.getLB()
      } else {
        this.timeShow = true
      }
    },
    getLB () {
      // 获取疗养登记统计信息
      queryConvalesceActivityCount({
        siteId: JSON.parse(localStorage.getItem("siteData")).id,
        frontTime: this.frontTime,
        backTime: this.backTime
      })
        .then((resXX) => {
          this.LYdata = resXX.data
        })
        .catch((err) => {
          console.log(err)
        })
    },
    confirm (e) {
      this.timeShow = false
      this.frontTime = moment(e[0]).format("YYYY-MM-DD")
      this.backTime = moment(e[1]).format("YYYY-MM-DD")
      this.timeValue = [this.frontTime, this.backTime]
      this.getLB()
    },
    showPerson (item) {
      if (item.totalQuantity > 0) {
        this.detailList = item.convalesceList[0].convalesceAndEntourageList
        this.show = true
      }
    },
    back () {
      this.$router.back()
    }
  },
  mounted () {
    this.frontTime = moment().subtract(7, "days").format("YYYY-MM-DD")
    this.backTime = moment().format("YYYY-MM-DD")
    this.timeValue = [this.frontTime, this.backTime]
    this.getLB()
  }
}
</script>

<style lang="less" scoped>
.cleaning_1 {
  height: 100vh;
  width: 100%;
  background: url("../../../../static/Homeimg/SYBJ1.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
.list_outside {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #fff;
  height: calc(100vh - 100px);
  .list {
    // display: flex;
    .list_team {
      margin-top: 10px;
      .list_item {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        height: 95px;
        width: 80%;
        font-size: 12px;
        border-radius: 5px;
        margin: 10px auto;
        position: relative;
        // .img {
        //   position: absolute;
        //   right: 0;
        //   bottom: 0;
        // }
      }
    }
    .list_background {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 320px;
    }
  }
}
.list_head {
  margin-top: 10px;
  color: #999999;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
}
.van_tab {
  --van-tabs-bottom-bar-color: #00baad;
}
.XX {
  width: calc(100% - 150px);
}
.person_list {
  display: flex;
  flex-direction: column;
}
</style>
